<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/my/my.css">

    <title>北京自考社区</title>
</head>

<body>
<!-- header -->
<th:block th:include="common::header"></th:block>

<!-- main -->
<div class="layui-container re-layui-container my-main">
    <div class="my-main-content">
        <!-- 文章标签 -->
        <span id="labelList" class="layui-breadcrumb re-layui-breadcrumb" lay-separator="|">
        </span>
        <!-- 文章列表 -->
        <table id="articleList" class="re-layui-table"></table>
    </div>
    <div class="my-main-side">
        <div class="my-main-side-div">
            <div style="padding: 6px" class="my-adorn-status">
                <p style="font-weight: bold">今日推荐</p>
                <ul id="recomends">

                </ul>
            </div>
            <div style="padding: 6px"  class="my-adorn-recom">
                <p style="font-weight: bold">热门文章</p>
                <ul id="hots">
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- footer -->
<th:block th:include="common::footer"></th:block>
</body>
<script src="/jquery-3.5.1.js"></script>
<script src="/layui/layui.js"></script>
<script src="/my/my.js"></script>

<!--在script中写thymeleaf，一定要带上这一句，不然会出现莫名其妙的错误
    th:inline="javascript"  加上这句后，重新部署项目
-->
<script th:inline="javascript">
    // 页面公共部分的导入，这种方法导入会产生一些问题，layUI自身定义的一些动态效果没有了
    $(document).ready(function () {
        // $("#header").load("header.html");
        // $("#footer").load("common/footer.html");
    });

    // 初始化操作 - 页面加载完成执行
    $(document).ready(function () {
        // 处理搜索框的显示
        $("#input-search-form").attr("placeholder","搜索文章");
        // 渲染文章标签
        $.ajax({
            url: '/article/tag/all',
            type: 'get',
            contentType: "application/json;charset=UTF-8",
            success: function (res) {
                var _html = '<a id="" style="font-weight: bold" href="javascript:;">全部</a>';
                $.each(res.items,function (idx,item) {
                    _html += '<a id="'+item.id+'" href="javascript:;">'+ item.name +'</a>';
                })
                $("#labelList").html(_html);
            },
            error: function () {
                var _html = '<li>数据加载异常</li>';
                $("#labelList").html(_html);
            }
        });
        // 渲染今日推荐
        $.ajax({
            url: '/article/article/recommends',
            type: 'get',
            contentType: "application/json;charset=UTF-8",
            success: function (items) {
                var _html = '';
                $.each(items,function (idx,item) {
                    _html += '<li style="margin: 6px 0px;cursor: pointer;"><a href="/article/article/showArticle/'+item.id+'" target="_blank" class="layui-table-link">'+item.title+' </a><img style="width:14px;height: 14px;margin-top: -2px;" src="/images/readCountWhite.png"/>'+ item.pv + '</li>'
                })
                $("#recomends").html(_html);
            },
            error: function () {
                var _html = '<li>数据加载异常</li>';
                $("#recomends").html(_html);
            }
        });
        // 渲染热门文章
        $.ajax({
            url: '/article/article/hots',
            type: 'get',
            contentType: "application/json;charset=UTF-8",
            success: function (items) {
                var _html = '';
                $.each(items,function (idx,item) {
                    _html += '<li style="margin: 6px 0px;cursor: pointer;"><a href="/article/article/showArticle/'+item.id+'" target="_blank" class="layui-table-link">'+item.title+' </a><img  style="width:14px;height: 14px;margin-top: -2px;" src="/images/readCountWhite.png"/>'+ item.totalPv + '</li>'
                })
                $("#hots").html(_html);
            },
            error: function () {
                var _html = '<li>数据加载异常</li>';
                $("#hots").html(_html);
            }
        });
    })

    layui.use(['element', 'table','layer'], function () {
        var element = layui.element;
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;

        // 渲染文章列表
        table.render({
            elem: '#articleList'
            , url: '/article/article/listForLayUI'
            , skin: 'line'
            , size: 'lg'
            , page: true
            , cols: [
                [
                    {
                        field: 'title',
                        title: '标题',
                        templet: '<div><a href="/article/article/showArticle/{{d.id}}" target="_blank" class="layui-table-link">{{d.title}}</a></div>'
                    },
                    {field:'userName',title:'作者',width:'10%'},
                    {
                        field:'createTime',
                        title:'发布时间',
                        width:'20%',
                        templet:
                            '<div>{{layui.util.toDateString(d.createTime,\'yyyy-MM-dd HH:mm:ss\')}}</div>'
                    },
                    {field:'totalPv',title:'总浏览量',width:'10%'},
                    {field: 'pv', title: '今日浏览', width: '10%'}
                ]
            ]
        });

        // 监听搜索框
        $(document).on('click','#search-btn',function(){
            var searchStr = $("#input-search-form").val();

            if (!searchStr){
                searchStr = "";
            }
            table.reload("articleList",{
                where:{
                    searchStr:searchStr
                }
                ,page:{
                    curr:1
                }
            });
        });

        // 监听文章标签
        $(document).on('click','#labelList a',function(){
            var tagId = this.id;

            $("#labelList a").css("font-weight","normal");
            $(this).css("font-weight","bold");

            table.reload("articleList",{
                where:{
                    tagId:tagId
                }
                ,page:{
                    curr:1
                }
            });
        });

        // 监听写文章
        $(document).on('click','#writeArticle',function(){
            var user = [[${#httpSession.getAttribute('user')}]];
            if (!user) {
                layer.open({
                    type: 0,
                    content: "请先登录"
                });
            } else {
                window.open('/article/article/writeArticle');
            }
        });
    });
</script>
</html>